<template>
  <BaseAgGrid v-bind="gridOptions" />
</template>

<script setup lang="ts">
import BaseAgGrid from '@/components/BaseAgGrid.vue'
import { ref } from 'vue'
import { type ColDef, type GridOptions } from 'ag-grid-community'

interface RowVO {
  storage: string
  drug_code: string
  drug_spec: string
  drug_state: string
  drug_id: string
  spec_alias: string
  drug_name: string
  trade_name: string
  factory: string
  factory_alias: string
  drug_units: string
  dose_per_unit: number
  dose_units: string
  drug_form: string
  retail_price: number
  input_code: string
  pack_first_day: boolean
  dispensing_property: string
  tagMachine: string
}

const tableConfig = ref({
  visible: [
    {
      field: 'retail_price',
      title: "零售价",
      visible: false,
    }, {
      field: 'drug_name',
      title: "药品名称",
      visible: true,
    }, {
      title: "贴签机",
      field: 'tagMachine',
      visible: false,
    }
  ],
  cellStyles: [
    {
      colField: 'drug_state',
      constraints: [
        {
          conditionName: '细胞毒',
          condition: '==',
          conditionVal: '细胞毒',
          style: { backgroundColor: '#D4FF00', color: '#006AFF', fontStyle: 'italic', fontSize: '14px', fontWeight: 'bolder' },
        },
        {
          conditionName: '缺货药品',
          condition: '==',
          conditionVal: '缺货',
          style: { backgroundColor: '#FF4400', color: 'white', fontStyle: 'italic', fontSize: '14px', fontWeight: 'bolder' },
        },
        {
          conditionName: '异常药品',
          condition: '==',
          conditionVal: '异常',
          style: { backgroundColor: '#008CFF', color: '#FF00EA', fontStyle: 'italic', fontSize: '14px', fontWeight: 'bolder' },
        },
      ],
    },
  ]
})

const gridOptions = ref<GridOptions<RowVO>>({
  rowData: [],
  columnDefs: [
    { minWidth: 100, field: 'drug_name', headerName: '药品名称', pinned: 'left', sortable: true },
    { minWidth: 100, field: 'drug_spec', headerName: '药品规格', pinned: 'left', },
    { minWidth: 100, field: 'drug_state', headerName: '药品状态' },
    { minWidth: 100, field: 'factory', headerName: '生产厂商', pinned: 'left', },
    { minWidth: 100, field: 'storage', headerName: '库存位置' },
    { minWidth: 100, field: 'drug_code', headerName: '药品编码' },
    { minWidth: 100, field: 'pack_first_day', headerName: '首日打包' },
    { minWidth: 100, field: 'dispensing_property', headerName: '摆药类型' },
    { minWidth: 100, field: 'spec_alias', headerName: '规格别名' },
    { minWidth: 100, field: 'factory_alias', headerName: '厂商别名' },
    { minWidth: 100, field: 'drug_units', headerName: '单位' },
    { minWidth: 100, field: 'dose_per_unit', headerName: '单位剂量' },
    { minWidth: 100, field: 'tagMachine', headerName: '贴签机' },
  ],
  defaultColDef: {
    flex: 1,
  },
  enableCellSpan: true,
  suppressExcelExport: true, // 关闭 Excel 导出
  suppressCsvExport: true, // 关闭 CSV 导出
  // suppressMenuHide: true, // 是否隐藏菜单
  // suppressContextMenu: true, // 是否禁用右键菜单
})

gridOptions.value.columnDefs?.forEach(col => {
  for (const item of tableConfig.value.visible) {
    if ((<ColDef<RowVO>>col).field == item.field)
      (<ColDef<RowVO>>col).initialHide = !item.visible;
  }

  for (const item of tableConfig.value.cellStyles) {
    if ((<ColDef<RowVO>>col).field == item.colField)
      (<ColDef<RowVO>>col).cellStyle = ({ value }) => {
        let funcStrs = "";
        for (const style of item.constraints) {
          const funcStr = `if('${value}' ${style.condition} '${style.conditionVal}') return ${JSON.stringify(style.style)};`;
          funcStrs += funcStr;
          // console.log(`output->`, new Function(funcStr)());
          // console.log(`output->funcStr`, funcStr)
        }
        return new Function(funcStrs)();
      };
  }
})


function queryInit() {
  // 从接口获取数据
  fetch('https://mock.presstime.cn/mock/66f26d8d0b20e0d6a1d5a491/test/getDrugList', {
    headers: {
      'content-type': 'application/json',
    },
    method: 'GET',
  })
    .then((res) => res.json())
    .then((res) => {
      const tmpData = [...res.result.items].slice(0, 3)
      gridOptions.value.rowData = tmpData
    })
}
queryInit()
</script>

<style scoped></style>
